<template>
  <div class="product-container" v-if="list">
    <van-search
      v-model="value"
      @keyup="search(value)"
      placeholder="搜索"
      shape="round"
      background="transparent"
    />

    <ul>
      <van-swipe-cell

        v-for="i in list"
        :key="i.id"
        ref="cell"
      >
        <template #right>
          <van-button
            square

            text="删除"
            @click="deleteEvt(i.id)"
          />
        </template>
        <li ref="cell">
          <i class="icon">&#xe677;</i>
          <div>{{ i.name }}</div>
          <span>{{ i.date }}</span>
        </li>
      </van-swipe-cell>
    </ul>
  </div>
</template>
<script>

export default {
  name: 'index',

  data () {
    return {
      value: '',
      timer: null,

      list: Array(7)
        .fill()
        .map((_, index) => {
          return {
            id: index,
            name: '苯甲酸的合成' + 0 + (index + 1),
            date: '2022-7-' + 1 + index * 1
          }
        })
    }
  },
  watch: {},
  methods: {
    // 删除事项******************************************************
    deleteEvt (id) {
      this.$dialog.confirm({
        title: '删除确认',
        message: '确定删除吗？'
      }).then(
        this.list = this.list.filter((item) => item.id !== id)

      )
    },

    // 搜索事件***********************************************************
    search (name) {
      clearTimeout(this.timmer)
      this.timmer = setTimeout(() => {
        // debugger
        this.list = this.list.filter((i) => i.name === name)
      }, 1500)
    }
  }
}
</script>
<style lang="less" scoped>
@import "@/style/common.less";
.product-container {
  .EDM-font;

  ul {
    width: 100%;

    list-style: none;
    position: relative;
    top: 0;
    left: 0;
  }
  li {
    display: block;
    border-bottom: 1px solid @c4;
    padding: 8px 6px;
    background-color: rgba(255, 255, 255, 0.5);
    color: @c10;
    margin-bottom: 10px;
    &:last-child {
      border-bottom: none;
    }
    i {
      .EDM-font;
      position: absolute;
      top: 20px;
      left: 5px;
    }
    span {
      color: rgb(198, 194, 194);
      font-size: 0.7rem;
      margin-left: 40px;
    }
    div {
      margin-left: 40px;
    }
  }
}

.van-button {
  height: 66px;
  background-color: rgba(234, 211, 211, 0.5);
  border-bottom: 1px solid @c4;
  outline: none;
}
</style>
